<template>
	<!-- <uni-popup ref="popup" type="bottom"> -->
		<view class="pageBox" style="">


<!-- #ifdef APP-PLUS -->
	<div  style="height: 35px; background-color: #39A6FF;"></div>
<!-- #endif -->
		
		
			<uni-nav-bar background-color="#39A6FF" :border="false" color="#fff" title="登录">
			</uni-nav-bar>
			
			<div class="bannerBox" @click="onTest">
				<image class="logo" style=" display: block;" mode="aspectFill" src="../static/logo.png"></image>
			</div>

			<view class="formBox">
				<uni-forms ref="form1" :modelValue="formData" :rules="rules1">
					<uni-forms-item label="手机号" name="phone">
						<uni-easyinput maxlength="11" type="text" v-model="formData.phone" placeholder="请输入手机号" />
					</uni-forms-item>
				</uni-forms>
				<uni-forms ref="form2" :modelValue="formData" :rules="rules2">
					<uni-forms-item label="验证码" name="code">
						<div class="codeBox">
							<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
					
							<button v-if="formData.timer <= 0" class="code_button" size="mini" @click="getCode">获取验证码</button>
							<button v-else class="code_button" size="mini">{{formData.timer}} S</button>
						</div>
					</uni-forms-item>
					<uni-forms-item label=" " name="hobby">
						<div style="display: flex; align-items: center;">
							<div style="width: 190px;">
						       <uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" />
						    </div>
							<view @click="goUrl('/pages/more/userAgree')" style="margin-left: -100px; color: rgb(57, 166, 255); position: relative; z-index: 99;">《用户协议》</view>
							<view @click="goUrl('/pages/more/privacy')"  style=" color: rgb(57, 166, 255); position: relative; z-index: 99;">《隐私协议》</view>
						</div>
					</uni-forms-item>
				</uni-forms>
			
				
				<button style="backgroundColor:#39A6FF; borderColor:#39A6FF; margin-top: -10px;" type="primary" @click="submit">登录</button>
			</view>
		</view>
	<!-- </uni-popup> -->
</template>

<script>
	import {
		APIJS
	} from '../api/api.js'
	export default {
		name: "loginPup",
		// props: ['switchBtn'],
		data() {
			return {
				// 表单数据
				formData: {
					phone: '',
					code: '',
					timer: 0
				},
				hobbys: [{
					text: '请阅读协议',
					value: 0
				}],
				timeval: null,
				rules1: {
					// 对name字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入正确的手机号',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!/^1\d{10}$/.test(value)) {
										callback('请输入正确的手机号')
									}
									return true
								}
							}
						]
					}
				},
				rules2: {
					// 对email字段进行必填验证
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入正确的验证码',
						}, {
							format: 'number',
							errorMessage: '请输入正确的验证码',
						}]
					},
					hobby : {
						rules: [{
							required: true,
							errorMessage: '请勾选协议！',
						}]
					},
				}
			};
		},
		mounted() {
			// let token = uni.getStorageSync('token')
			// if (!token) {
			// 	this.init()
			// }
		},
		methods: {
			submit() {
				let vm = this
				vm.$refs.form1.validate().then(res => {
					vm.$refs.form2.validate().then(res => {
						APIJS.validCode({
							phone: vm.formData.phone,
							"code": vm.formData.code
						}).then((res) => {
							uni.showToast({
								title: '登录成功！',
							  duration: 3000,
								icon: 'success'
							});						
							uni.setStorageSync('token','Bearer ' + res.data.token)
							uni.setStorageSync('phone', vm.formData.phone)
							// vm.$emit('success')
							// uni.getStorageSync('oriUrl') ||
							let oriUrl =  '/pages/index/index' 
							uni.reLaunch({
								url: oriUrl
							});
							
						})
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			
			onTest() {
				// console.log(1)
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// });
				// console.log(2)
			},

			getCode() {
				let vm = this
				this.$refs.form1.validate().then(res => {
					APIJS.sendMsg({
						phone: vm.formData.phone
					}).then(() => {
						console.log('发送成功')
						uni.showToast({
							title: '发送成功',
					 	  duration: 3000,
							icon: 'success'
						});
						
						vm.formData.timer = 60
						vm.timeReduce()
				
					}).catch((err) => {
						console.log(err)
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			
			goUrl(url) {
				console.log(url, 111)
				uni.navigateTo({
					url: url
				});
			},
			
			timeReduce() {
				let vm = this
				if (vm.formData.timer == 60) {
					vm.timeval = setInterval(() => {
						vm.formData.timer --
						
						if (vm.formData.timer<=0) {
							clearInterval(vm.timeval)
						}
						
					}, 1000)
				}
			},
			init() {
				this.$refs.popup.open('bottom')
			},

			onClose() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="less">
	
	// /deep/ .uni-popup__wrapper{
	// 	height: 100vh; background-color: #fff!important;
	// }
	
	.bannerBox{
		padding-top: 30px;
		.logo {
			width: 100px;
			height: 100px;
			margin: 0px auto 0;
		}
	}
	.pageBox {
		
		background-color: #fff; height: 100%; width: 100%;
	

		.formBox {
			padding: 40px 10px 0;

			.codeBox {
				position: relative;

				.code_button {
					position: absolute;
					top: 4px;
					right: 5px;
				}
			}
		}
	}
</style>
